<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod__adjust">
      <el-form :inline="true" :model="query" @keyup.enter.native="getData()">
    <el-form-item>
    <el-input v-model="query.location" placeholder="地点" clearable></el-input>
    </el-form-item>
    <el-form-item>
    <el-select v-model="query.studyWay" placeholder="请选择学习方式">
                    <el-option key="1" label="全日制" value="1"></el-option>
                    <el-option key="2" label="非全日制" value="2"></el-option>
    </el-select>
    </el-form-item>

    <el-form-item >
        <el-input v-model="query.collegeName" placeholder="招生单位" clearable></el-input>
    </el-form-item>

    <el-form-item >
        <el-input v-model="query.subjectName" placeholder="专业" clearable></el-input>
    </el-form-item>
           <el-form-item>
          <el-button @click="getData()">查询</el-button>
          <el-button @click="reset()">重置</el-button>
   </el-form-item>

  </el-form>
      <el-table v-loading="tableDataLoading" :data="tableData" border @selection-change="selectionChange" style="width: 100%;">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
          <el-table-column prop="collegeName" label="招生单位" header-align="center" align="center"></el-table-column>
          <el-table-column prop="subjectName" label="专业" header-align="center" align="center"></el-table-column>
          <el-table-column prop="collegeType" label="院校类型"  header-align="center" align="center">
              <template slot-scope="scope">
                  <span v-if="scope.row.collegeType === 1">985</span>
                  <span v-if="scope.row.collegeType === 2">211</span>
                  <span v-if="scope.row.collegeType === 3">双非</span>
              </template>
          </el-table-column>
       <el-table-column prop="location" label="地点" header-align="center" align="center"></el-table-column>
       <el-table-column prop="dept" label="院系" header-align="center" align="center"></el-table-column>
       <el-table-column prop="researchDirection" label="研究方向"  header-align="center" align="center"></el-table-column>
       <el-table-column prop="studyWay" label="学习方式"  header-align="center" align="center">
         <template slot-scope="scope">
             <span v-if="scope.row.studyWay === 1">全日制</span>
             <span v-if="scope.row.studyWay === 2">非全日制</span>
         </template>
       </el-table-column>
       <el-table-column prop="count" label="计划余额" header-align="center" align="center"></el-table-column>
       <el-table-column prop="updateTime" width="160" label="最后更新" header-align="center" align="center"></el-table-column>
          <el-table-column prop="studyWay" label="申请条件"  header-align="center" align="center">
              <template slot-scope="scope">
                  <span style="color: #00a854;cursor: pointer" @click="updateAdjustInfo(scope.row)">查看</span>
              </template>
          </el-table-column>
<!--    <el-table-column prop="way" label="调剂方法" width="160" header-align="center" align="center">-->
<!--        <template slot-scope="scope">-->
<!--                        <span @click="downLadDocument(scope.row.way)"-->
<!--                              style="cursor: pointer;color:green">调剂方法信息</span>-->
<!--        </template>-->
<!--    </el-table-column>-->
<!--       <el-table-column prop="remark" label="调剂说明" header-align="center" align="center"></el-table-column>-->
<!--       <el-table-column prop="type" label="初始学位类型" header-align="center" align="center"></el-table-column>-->
<!--       <el-table-column prop="subjectNameOne" label="初试科目" header-align="center" align="center"></el-table-column>-->
<!--       <el-table-column prop="english" label="英语" header-align="center" align="center"></el-table-column>-->
<!--       <el-table-column prop="allGrade" label="总分" header-align="center" align="center"></el-table-column>-->
<!--       <el-table-column prop="oneGrade" label="第一门" header-align="center" align="center"></el-table-column>-->
<!--       <el-table-column prop="twoGrade" label="第二门" header-align="center" align="center"></el-table-column>-->
<!--       <el-table-column prop="threeGrade" label="第三门" header-align="center" align="center"></el-table-column>-->
<!--       <el-table-column prop="fourGrade" label="第四门" header-align="center" align="center"></el-table-column>-->

       <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="success" size="small" @click="delAdjustInfo(scope.row)">申请</el-button>
          </template>
      </el-table-column>
     </el-table>
      <el-pagination
              :current-page="query.pageNum"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="query.pageSize"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="pageSizeChange"
              @current-change="pageCurrentChange">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <el-dialog :visible.sync="addOrUpdateVisible" :title="!form.id ? '新增' : '编辑'" :close-on-click-modal="false" :close-on-press-escape="false">
        <el-form :model="form" :rules="rule" ref="form" @keyup.enter.native="formSubmitHandle()" label-width="100px">
            <el-form-item label="调剂方法" prop="way">
                         <span @click="downLadDocument(form.way)"
                               style="cursor: pointer;color:green">调剂方法信息</span>
    </el-form-item>
    <el-form-item label="调剂说明" prop="remark">
      <el-input v-model="form.remark" placeholder="调剂说明"></el-input>
    </el-form-item>
    <el-form-item label="初始学位类型" prop="type">
      <el-input v-model="form.type" placeholder="初始学位类型"></el-input>
    </el-form-item>
    <el-form-item label="转向计划">
        <Editor @input="editorInput($event)" :content="form.plan"></Editor>
    </el-form-item>
    <el-form-item label="初试门类(一级学科专业)">
        <Editor @input="editorInput2($event)" :content="form.sort"></Editor>
    </el-form-item>
    <el-form-item label="初试科目" prop="subjectName">
      <el-input v-model="form.subjectNameOne" placeholder="初试科目"></el-input>
    </el-form-item>
    <el-form-item label="英语" prop="english">
      <el-input v-model="form.english" placeholder="英语"></el-input>
    </el-form-item>
    <el-form-item label="总分" prop="allGrade">
      <el-input v-model="form.allGrade" placeholder="总分"></el-input>
    </el-form-item>
    <el-form-item label="第一门" prop="oneGrade">
      <el-input v-model="form.oneGrade" placeholder="第一门"></el-input>
    </el-form-item>
    <el-form-item label="第二门" prop="twoGrade">
      <el-input v-model="form.twoGrade" placeholder="第二门"></el-input>
    </el-form-item>
    <el-form-item label="第三门" prop="threeGrade">
      <el-input v-model="form.threeGrade" placeholder="第三门"></el-input>
    </el-form-item>
    <el-form-item label="第四门" prop="fourGrade">
      <el-input v-model="form.fourGrade" placeholder="第四门"></el-input>
    </el-form-item>
 </el-form>
      </el-dialog>

    </div>
  </el-card>
</template>

<script>
    import { } from '../../utils/validator'

    import {
        getAdjustInfo,
        saveAdjustInfo,
        updateAdjustInfo,
        delAdjustInfo,
        delBatchAdjustInfo,
        getAdjustInfo2
    } from '../../api/adjust';

import Editor from '../common/Editor';
import SingleUpload from '../common/singleUpload';
    import { getCollegeAndSubject } from '../../api/college';
    import { saveApplyInfo } from '../../api/apply';


  export default {
    components: {
    Editor,SingleUpload
    },

    data () {
      return {
        tableData: [],
          selectedOptions:[],
          list:[],
        query: {
          pageNum: 1,
          pageSize: 10,
          location:null,
          studyWay:null,
    collegeName:null,
            subjectName:null,
                },
        form: {},
        multipleSelection: [],
        tableDataLoading: false,
        total: 0,
        addOrUpdateVisible: false,
        rule: {
         collegeId: [{required: true, message: '招生单位不得为空', trigger: "blur"}],
         subjectId: [{required: true, message: '专业不得为空', trigger: "blur"}],
         location: [{required: true, message: '地点不得为空', trigger: "blur"}],
         dept: [{required: true, message: '院系不得为空', trigger: "blur"}],
         researchDirection: [{required: true, message: '研究方向不得为空', trigger: "change"}],
         studyWay: [{required: true, message: '学习方式不得为空', trigger: "change"}],
         count: [{required: true, message: '计划余额不得为空', trigger: "blur"}],
         updateTime: [{required: true, message: '最后更新不得为空', trigger: "blur"}],
         way: [{required: true, message: '调剂方法不得为空', trigger: "blur"}],
         remark: [{required: true, message: '调剂说明不得为空', trigger: "blur"}],
         type: [{required: true, message: '初始学位类型不得为空', trigger: "blur"}],
         plan: [{required: true, message: '转向计划不得为空', trigger: "blur"}],
         sort: [{required: true, message: '初试门类(一级学科专业)不得为空', trigger: "blur"}],
         subjectName: [{required: true, message: '初试科目不得为空', trigger: "blur"}],
         english: [{required: true, message: '英语不得为空', trigger: "blur"}],
         allGrade: [{required: true, message: '总分不得为空', trigger: "blur"}],
         oneGrade: [{required: true, message: '第一门不得为空', trigger: "blur"}],
         twoGrade: [{required: true, message: '第二门不得为空', trigger: "blur"}],
         threeGrade: [{required: true, message: '第三门不得为空', trigger: "blur"}],
         fourGrade: [{required: true, message: '第四门不得为空', trigger: "blur"}],
        },
    }
   },
    created() {
      this.getData();
    },
    computed:{
        userType(){
            return Number(sessionStorage.getItem('userType'))
        }
    },

    methods:{

      /**
       * 获取所有调剂信息
       */
      getData(){
          this.query.userId = sessionStorage.getItem('userId');
          this.query.status = 2;
        getAdjustInfo2(this.query).then(res =>{
          this.tableData = res.data.list;
          this.total = res.data.total;
        });
          getCollegeAndSubject({pageSize:100}).then(res =>{
              this.list = res.data;
          })

      },

        handleChange(value) {
            console.log(value);
            this.form.collegeId = value[0];
            this.form.subjectId = value[1]
        },

    downLadDocument(url) {
        console.log(url);
        const a = document.createElement('a');
        a.href = url;
        a.download = new Date().getTime(); // 下载后文件名
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click(); // 点击下载
        document.body.removeChild(a); // 下载完成移除元素
    },
    editorInput(e) {
        console.log(e);
        this.form.plan = e;
    },

    editorInput2(e) {
        console.log(e);
        this.form.sort = e;
    },


      /**
       * 打开添加框
       */
      addAdjustInfo(){
        this.form = {};
        this.form.id = null;
        if (this.$refs['form'] !==undefined){
          this.$refs['form'].resetFields();
        }
        this.addOrUpdateVisible = true;
      },

      /**
       * 打开更新框
       */
      updateAdjustInfo(row){
        this.form = JSON.parse(JSON.stringify(row));
        // this.selectedOptions = [this.form.collegeId,this.form.subjectId];
        this.addOrUpdateVisible = true;
        },

      /**
       * 按住enter键或者确定按钮提交数据,对后台发请求
       * 如果id为null,就是走添加调剂信息的接口
       * 如果id不为null,就是走更新调剂信息的接口
       */
      formSubmitHandle(){
        this.$refs['form'].validate(valid => {
                if(valid){
          if (this.form.id === null){
        saveAdjustInfo(this.form).then(res =>{
            if (res.code === 1){
                this.$message.success('添加成功');
                this.getData();
                this.addOrUpdateVisible = false;
            }
            })
          }else {
        updateAdjustInfo(this.form).then(res =>{
              this.$message.success('更新成功');
              this.getData();
              this.addOrUpdateVisible = false;
            })
          }
          // this.$refs['form'].resetFields()

        }
        })
      },

      /**
       *单个删除数据
       */
      delAdjustInfo(row){
          if (Number(sessionStorage.getItem('userId')) === null){
              return this.$message.warning('请登录');
          }
        this.$confirm('确定要申请吗？', '提示', {
          type: 'warning'
        }).then(action => {
          if (action === 'confirm') {
              this.form = {};
              this.form.userId =sessionStorage.getItem('userId');
              this.form.collegeId = row.collegeId;
              this.form.subjectId = row.subjectId;
              this.form.adjustId = row.id;
            saveApplyInfo(this.form).then(res=>{
              if (res.code === 1){
                this.$message.success('申请成功待审核');
                this.getData();
              }else {
                return this.$message.error(res.msg)
              }
            })
          }
        }).catch(() => {});

      },



      /**
       * 选中table表格事件
       */
      selectionChange(val){
        this.multipleSelection = [];
        val.forEach((item) => {
          this.multipleSelection.push(item.id);
        });
      },

        /**
         * 批量删除调剂信息的接口
         */
      delBatchAdjustInfo(){
        delBatchAdjustInfo(this.multipleSelection.join(',')).then(res =>{
          this.$message.success('批量删除成功');
          this.getData();
        })
      },

      /**
       * 重置数据
       */
      reset(){
        this.query.location = null;
        this.query.studyWay = null;
                                          this.query.collegeName=null
                                                        this.query.subjectName=null
                                this.$set(this.query, 'pageNum', 1);
        this.getData();
      },


      /**
       * 分页(改变页码)
       * @param val
       */
      pageCurrentChange(val){
        this.$set(this.query, 'pageNum', val);
        this.getData();
      },

      /**
       * 分页(改变每页条数)
       * @param val
       */
      pageSizeChange(val){
        this.$set(this.query, 'pageSize', val);
        this.getData();
      },

      /**
       * 关闭弹窗
       */
      clearAddForm(){
        this.addOrUpdateVisible = false;
      }
    },


  }
</script>
<style scoped>
    /* 设置滚动条宽度和高度 */
    /deep/ .el-table__body-wrapper::-webkit-scrollbar {
        width: 8px; /* 横向滚动条 */
        height: 8px; /* 纵向滚动条 必写 */
    }
    /* 设置滚动条样式 */
    /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: #dde;
        border-radius: 3px;
    }
</style>
